{% extends "base.html" %}

{% block title %}创建项目 - 开源安全创意工坊{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h3 class="mb-0"><i class="fas fa-plus"></i> 创建新项目</h3>
            </div>
            <div class="card-body">
                <form id="createProjectForm">
                    <div class="mb-3">
                        <label for="projectName" class="form-label">项目名称 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="projectName" required 
                               placeholder="例如：智能防火墙系统">
                        <div class="form-text">给你的项目起一个响亮的名字</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="projectDescription" class="form-label">项目描述 <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="projectDescription" rows="4" required
                                  placeholder="请详细描述你的项目创意、目标和预期成果"></textarea>
                        <div class="form-text">让其他人了解你的项目想法</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="githubUrl" class="form-label">GitHub仓库地址（可选）</label>
                        <input type="url" class="form-control" id="githubUrl" 
                               placeholder="https://github.com/yourusername/your-project">
                        <div class="form-text">如果已有代码仓库，请填写完整URL</div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">团队成员</label>
                        <div id="teamMembers">
                            <div class="input-group mb-2">
                                <input type="text" class="form-control team-member" placeholder="成员姓名">
                                <button class="btn btn-outline-secondary" type="button" onclick="removeMember(this)">
                                    <i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="addMember()">
                            <i class="fas fa-plus"></i> 添加成员
                        </button>
                        <div class="form-text">建议3-5人小组协作</div>
                    </div>
                    
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{{ url_for('projects') }}" class="btn btn-secondary me-md-2">
                            <i class="fas fa-times"></i> 取消
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-check"></i> 创建项目
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function addMember() {
    const teamMembers = document.getElementById('teamMembers');
    const memberCount = teamMembers.querySelectorAll('.team-member').length;
    
    if (memberCount >= 5) {
        alert('团队成员最多5人');
        return;
    }
    
    const memberDiv = document.createElement('div');
    memberDiv.className = 'input-group mb-2';
    memberDiv.innerHTML = `
        <input type="text" class="form-control team-member" placeholder="成员姓名">
        <button class="btn btn-outline-secondary" type="button" onclick="removeMember(this)">
            <i class="fas fa-minus"></i>
        </button>
    `;
    teamMembers.appendChild(memberDiv);
}

function removeMember(button) {
    const memberCount = document.querySelectorAll('.team-member').length;
    if (memberCount <= 1) {
        alert('至少需要一名团队成员');
        return;
    }
    button.parentElement.remove();
}

document.getElementById('createProjectForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const name = document.getElementById('projectName').value.trim();
    const description = document.getElementById('projectDescription').value.trim();
    const githubUrl = document.getElementById('githubUrl').value.trim();
    
    // 获取团队成员
    const memberInputs = document.querySelectorAll('.team-member');
    const teamMembers = [];
    memberInputs.forEach(input => {
        if (input.value.trim()) {
            teamMembers.push(input.value.trim());
        }
    });
    
    if (teamMembers.length === 0) {
        alert('请至少添加一名团队成员');
        return;
    }
    
    if (teamMembers.length > 5) {
        alert('团队成员不能超过5人');
        return;
    }
    
    const projectData = {
        name: name,
        description: description,
        github_url: githubUrl,
        team_members: teamMembers
    };
    
    fetch('{{ url_for("create_project") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(projectData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('项目创建成功！');
            window.location.href = `/project/${data.project_id}`;
        } else {
            alert('项目创建失败，请重试');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('创建项目时发生错误，请重试');
    });
});
</script>
{% endblock %}
